<template>
	<view class="recharge-container">

		<view class="page-title">{{ i18n.onlineRecharge }}</view>

		<view class="amount">
			<!-- banner -->
			<view class="msg-banner">
				<image class="bg"
					:src="currentAmountOption.img ? picDomain + currentAmountOption.img : '/static/images/icon/recharge-balance-bg.jpg'">
					<view v-if="currentAmountOption.balanceId" class="current-selected">
						<view class="con">
							<view class="sel-amount">
								<text class="big">{{ currentAmountOption.rechargeAmount }}</text>
								<text class="small">{{ i18n.yuan }}</text>
							</view>
							<view
								v-if="currentAmountOption.presAmount && currentAmountOption.presScore && currentAmountOption.presGrowth && currentAmountOption.couponList.length"
								class="recharge-info">
								{{ i18n.rechargeOffer }}：
								<block v-if="currentAmountOption.presAmount && currentAmountOption.presAmount > 0">
									{{ i18n.additionalGifts }}{{ currentAmountOption.presAmount }}{{ i18n.yuan }}；
								</block>
								<block v-if="currentAmountOption.presScore">
									{{ i18n.handsels }}{{ currentAmountOption.presScore }}{{ i18n.userIntegral }}；
								</block>
								<block v-if="currentAmountOption.presGrowth">
									{{ i18n.handsels }}{{ currentAmountOption.presGrowth }}{{ i18n.growthValue }}；
								</block>
								<block v-if="currentAmountOption.couponList.length > 0">
									{{ i18n.handsels }}{{ currentAmountOption.couponList.length }}{{ i18n.sheet }}{{ i18n.coupon }}【
									<block v-for="(cou,couIdx) in currentAmountOption.couponList" :key="couIdx">
										{{cou.couponName}} <text
											v-if="couIdx != currentAmountOption.couponList.length-1">、</text>
									</block>】
								</block>
							</view>
						</view>
					</view>
					<view v-if="!currentAmountOption.balanceId" class="current-selected custom">
						<view class="txt">{{ i18n.customAmount }}</view>
					</view>
			</view>

			<!-- 金额选项 -->
			<view class="amount-options">
				<view v-for="(item, index) in rechargeList" :key="index"
					:class="['amount-item', currentAmountOption.balanceId === item.balanceId ? 'active' : '']"
					@tap="swichAmountOption(item)"> {{ item.rechargeAmount }} {{ i18n.yuan }}</view>
			</view>

			<!-- 自定义金额 -->
			<view class="custom-amount">
				<view class="tit">{{ i18n.customAmount }}（{{ i18n.yuan }}）</view>
				<view class="int">
					<input type="digit" :value="balance.customRechargeAmount" @input="getInputValue" maxlength="100000"
						:placeholder="i18n.maximumTopUp + 10 + i18n.millionYuan" @focus="onFocus" @blur="onBlur">
				</view>
			</view>

		</view>

		<!-- 支付方式 -->
		<view class="ways">
			<radio-group @change="handlePayTypeChange">
				<!-- #ifdef H5 -->
				<label>
					<!-- ALIPAY_H5: 6, 支付宝H5支付 -->
					<view class="item" @tap="payType = PayTypeConstant.ALIPAY_H5" v-if="!isWechat">
						<view class="pay-name">
							<view class="img">
							</view>
							<view class="name">{{i18n.PayWithAli}}</view>
						</view>
						<view class="check">
							<radio :checked="payType==PayTypeConstant.ALIPAY_H5"></radio>
						</view>
					</view>
				</label>
				<label>
					<!-- WECHATPAY_H5: 4, 微信H5支付 -->
					<view class="item" @tap="payType = PayTypeConstant.WECHATPAY_H5" v-if="!isWechat && !isAli">
						<view class="pay-name">
							<view class="img">
								<image src="/static/images/icon/wxpay.png" mode=""></image>
							</view>
							<view class="name">{{i18n.payWithWeChat}}</view>
						</view>
						<view class="check">
							<radio :checked="payType==PayTypeConstant.WECHATPAY_H5"></radio>
						</view>
					</view>
				</label>
				<label>
					<!-- WECHATPAY_MP: 5, 微信公众号支付 -->
					<view class="item" @tap="payType = PayTypeConstant.WECHATPAY_MP" v-if="isWechat && !isAli">
						<view class="pay-name">
							<view class="img">
								<image src="/static/images/icon/wxpay.png" mode=""></image>
							</view>
							<view class="name">{{i18n.payWithWeChat}}</view>
						</view>
						<view class="check">
							<radio :checked="payType==PayTypeConstant.WECHATPAY_MP"></radio>
						</view>
					</view>
				</label>
				<!-- #endif -->

				<!-- #ifdef APP-PLUS -->
				<label>
					<!-- ALIPAY_APP: 7, 支付宝APP支付 -->
					<view class="item" @tap="payType = PayTypeConstant.ALIPAY_APP">
						<view class="pay-name">
							<view class="img">
								<image src="/static/images/icon/alipay.png" mode=""></image>
							</view>
							<view class="name">{{i18n.PayWithAli}}</view>
						</view>
						<view class="check">
							<radio :checked="payType==PayTypeConstant.ALIPAY_APP"></radio>
						</view>
					</view>
				</label>

				<label>
					<!-- WECHATPAY_APP: 8, 微信APP支付 -->
					<view class="item" @tap="payType = PayTypeConstant.WECHATPAY_APP">
						<view class="pay-name">
							<view class="img">
								<image src="/static/images/icon/wxpay.png" mode=""></image>
							</view>
							<view class="name">{{i18n.payWithWeChat}}</view>
						</view>
						<view class="check">
							<radio :checked="payType==PayTypeConstant.WECHATPAY_APP"></radio>
						</view>
					</view>
				</label>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<label>
					<!-- WECHATPAY: 1, 小程序支付 -->
					<view class="item" @tap="payType = PayTypeConstant.WECHATPAY">
						<view class="pay-name">
							<view class="img">
								<image src="/static/images/icon/wxpay.png" mode=""></image>
							</view>
							<view class="name">{{i18n.payWithWeChat}}</view>
						</view>
						<view class="check">
							<radio :checked="payType==PayTypeConstant.WECHATPAY"></radio>
						</view>
					</view>
				</label>
				<!-- #endif -->
			</radio-group>
		</view>

		<view class="btn-box">
			<view class="btn" @tap="toPay">立即充值</view>
		</view>

	</view>
</template>

<script>
	var http = require("@/utils/http.js");
	import {
		PayType,
		AppType
	} from "@/utils/constant.js";
	import config from "@/utils/config.js";
	import Wechat from "@/utils/wechat.js";
	import Pay from "@/utils/pay.js";
	import util from "@/utils/util.js";
	export default {
		data() {
			return {
				picDomain: config.picDomain, //图片前缀

				isWechat: false, //是否为微信环境
				payType: PayType.ALIPAY_H5, //支付类型，默认支付宝
				PayTypeConstant: PayType, //支付类型常量
				isAli: false, // 是否支付宝H5环境内

				rechargeList: [], //充值数据列表
				currentAmountOption: {}, // 当前项
				balance: {}, // 金额传参
				exceedingLimit: false // 超出小数位数限制
			}
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},

		onLoad: function() {
			// #ifdef H5
			this.isWechat = Wechat.isWechat()
			// #endif
			// #ifdef APP-PLUS
			this.isWechat = false
			this.payType = PayType.ALIPAY_APP
			// #endif
			// #ifdef MP-WEIXIN
			this.isWechat = false
			this.payType = PayType.WECHATPAY
			// #endif
			if (this.isWechat) {
				// 如果是微信环境打开h5,使用公众号支付
				this.payType = PayType.WECHATPAY_MP
			}

			this.isAli = uni.getStorageSync('appType') == AppType.ALI; // 是否支付宝内环境

		},

		onShow: function() {
			this.queryRechargeDataList() //获取充值数据列表
		},

		methods: {
			// 面额选项点击切换
			swichAmountOption(item) {
				this.currentAmountOption = item
				this.balance = {
					balanceId: item.balanceId,
					customRechargeAmount: '' // 自定义金额
				}
			},


			/**
			 * 获取充值数据列表
			 */
			queryRechargeDataList: function() {
				var params = {
					url: '/p/userBalance/getList',
					method: 'GET',
					data: {},
					callBack: res => {
						this.rechargeList = res
						this.swichAmountOption(this.rechargeList[0])
					}
				};
				http.request(params)
			},

			/**
			 * 获取焦点
			 */
			onFocus() {
				this.currentAmountOption = {}
				this.balance = {
					balanceId: -1,
					customRechargeAmount: this.balance.customRechargeAmount // 自定义金额
				}
			},

			// 失焦
			onBlur() {
				const reg = /^\d*\.?\d{0,2}$/
				const intVal = reg.test(this.balance.customRechargeAmount)
				this.exceedingLimit = false
				if (!intVal) {
					this.balance.customRechargeAmount = ''
					uni.showToast({
						title: '最多支持2位小数',
						icon: 'none'
					})
					this.exceedingLimit = true
				}
			},

			/**
			 * 获取input框的值
			 */
			getInputValue(e) {
				this.balance = {
					balanceId: -1,
					customRechargeAmount: e.detail.value // 自定义金额
				}
			},

			/**
			 * 修改支付类型
			 */
			handlePayTypeChange(e) {
				console.log(this.PayTypeConstant.ALIPAY_H5)
			},

			// 去支付
			toPay: function() {
				const balanceId = this.balance.balanceId
				const customRechargeAmount = this.balance.customRechargeAmount
				if (this.exceedingLimit) {
					return
				}
				// 请输入充值金额
				if (balanceId === -1 && !customRechargeAmount && customRechargeAmount !== 0) {
					uni.showToast({
						title: this.i18n.enterRechargeAmount,
						icon: 'none'
					})
					return
				}
				// 充值金额不能小于0.01
				if (balanceId === -1 && customRechargeAmount < 0.01) {
					this.balance.customRechargeAmount = ''
					uni.showToast({
						title: this.i18n.rechargeAmountMinimum,
						icon: 'none'
					})
					return
				}
				// 充值金额不能超过10万
				if (balanceId === -1 && customRechargeAmount > 100000) {
					this.balance.customRechargeAmount = ''
					uni.showToast({
						title: this.i18n.rechargeAmountMaximum,
						icon: 'none'
					})
					return
				}
				Pay.toOrderPay(this.payType, '', '', '', '', this.balance)
			}

		}
	}
</script>

<style scoped lang="scss">
	/* 余额充值页 */
	.recharge-container {
		display: block;
		padding: 20rpx 30rpx;
		box-sizing: border-box;


		.page-title {
			display: block;
			font-size: 42rpx;
			margin-bottom: 40rpx;
		}

		/* 金额 */
		.amount {
			.msg-banner {
				position: relative;
				display: flex;
				align-items: center;
				width: 100%;
				min-height: 240rpx;
				height: auto;
				/* height: 240rpx; */
				border-radius: 10rpx 50rpx 10rpx 10rpx;
				/* box-shadow: 0 20rpx 20rpx rgb(228,49,48,.1); */
				box-shadow: 0 20rpx 20rpx rgba(0, 0, 0, .1);
				margin-bottom: 64rpx;
				box-sizing: border-box;

				.bg {
					position: absolute;
					top: 0;
					left: 0;
					display: block;
					width: 100%;
					height: 100%;
					z-index: -1;
					border-radius: 10rpx 50rpx 10rpx 10rpx;
				}

				.current-selected {
					padding: 28rpx;
					color: #fff;
					box-sizing: border-box;
					font-size: 24rpx;
					z-index: 2;



					&.custom {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						height: 100%;

						.txt {
							font-size: 44rpx;
						}
					}

					.con {
						display: block;
						width: 100%;
						height: auto;

						.sel-amount {
							margin-bottom: 10rpx;

							.big {
								font-size: 70rpx;
								line-height: 1em;
							}

							.small {
								font-size: 28rpx;
								padding: 0 14rpx;
								line-height: 1em;
							}
						}

						.recharge-info {
							line-height: 1.5em;
							height: auto;

							&::-webkit-scrollbar-track {
								-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
								border-radius: 5px;
								background-color: rgba(255, 255, 255, 0.8);
							}

							&::-webkit-scrollbar-thumb {
								border-radius: 5px;
								-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .3);
								background-color: #555;
							}
						}
					}
				}
			}

			.amount-options {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;

				.amount-item {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 210rpx;
					height: 110rpx;
					border: 1px solid #eee;
					border-radius: 4rpx;
					box-sizing: border-box;
					margin-bottom: 30rpx;
					font-size: 32rpx;

					&:not(:nth-child(3n)) {
						margin-right: 30rpx;
					}

					&.active {
						border: 2rpx solid #E43130;
						color: #E43130;
						background: #FFEDEF;
					}
				}
			}

			.custom-amount {
				.tit {
					font-size: 28rpx;
				}

				.int {
					display: block;
					height: 1em;
					line-height: 1em;
					border-bottom: 1px solid #eee;
					padding: 18rpx 0;


					& input {
						font-size: 28rpx;
					}
				}
			}
		}

		/* 支付方式 */
		.ways {
			margin-top: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}

			.item {
				display: flex;
				align-items: center;
				/* border-bottom: 1px solid #eee; */
				padding: 20rpx 0;

				.pay-name {
					flex: 1;
					display: flex;
					align-items: center;

					.img {
						width: 48rpx;
						height: 48rpx;
						font-size: 0;
					}

					.name {
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}
			}
		}

		/* 支付按钮 */
		.btn-box {
			display: block;
			width: 100%;
			margin-top: 50rpx;
			box-sizing: border-box;

			.btn {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				background: #E43130;
				color: #fff;
				text-align: center;
				font-size: 28rpx;
				border-radius: 80rpx;
			}
		}
	}
</style>
